﻿<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/icons-extra.css" />
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
		<link rel="stylesheet" href="../css/my-conference-book.css" />
		<style type="text/css">
			[v-cloak] {
				display: none !important;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">预约会议</h1>
			<a id="btnSaveConference" class="mui-icon-right-nav mui-pull-right mui-nav-save-conference">保存</a>
		</header>
		<!-- v-cloak-->
		<div class="mui-content" id="mui-content">
			<div class="mui-control-content mui-scroll-wrapper mui-active">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell" style="padding: 11px 5px;" @click="selectMeetingType">
							<div class="mui-input-row mui-navigate-right">
								<label>会议类型</label>
								<!--<input type="text" id="handleDisagree" placeholder="请选择会议类型">-->
								<input id="selectMeetingType" v-model="meetingtype" type="text" data-options='{}' readonly class="mui-input-clear mui-input" placeholder="请选择会议类型">
							</div>
						</li>
						<li class="mui-table-view-cell" style="padding: 11px 5px;" @click="selectMeetingForm">
							<div class="mui-input-row mui-navigate-right">
								<label>会议形式</label>
								<input id="selectMeetingForm" v-model="meetingform" type="text" data-options='{}' readonly class="mui-input-clear mui-input" placeholder="请选择会议形式">
							</div>
						</li>
						<li class="mui-table-view-cell" style="padding: 11px 5px;">
							<div class="mui-input-row" id="isOpen">
								<label>是否公开</label>
								<div class="mui-switch mui-switch-blue">
									<div class="mui-switch-handle"></div>
								</div>
							</div>
						</li>
						<li class="mui-table-view-cell" style="padding: 11px 5px;">
							<div class="mui-input-row mui-navigate-right">
								<label>开始时间</label>
								<input id="beginTime" v-model="meetingbeginTime" type="text" data-options='{}' readonly class="mui-input-clear mui-input" placeholder="请选择会议开始时间">
							</div>
						</li>
						<li class="mui-table-view-cell" style="padding: 11px 5px;">
							<div class="mui-input-row mui-navigate-right">
								<label>结束时间</label>
								<input id="endTime" v-model="meetingendTime" type="text" data-options='{}' readonly class="mui-input-clear mui-input" placeholder="请选择会议结束时间">
							</div>
						</li>
						<li class="mui-table-view-cell" style="padding: 11px 5px;">
							<div class="mui-input-row">
								<label>会议提醒</label>
								<input type="text" class="mui-input-clear mui-input" disabled="disabled" placeholder="不提醒">
							</div>
						</li>
						<li class="mui-table-view-cell" style="padding: 11px 5px;">
							<div class="mui-col-xs-12">
								<div class="mui-input-row">
									<label>会议主题</label>
									<input type="text" v-model="meetingtheme" class="mui-input-clear mui-input" placeholder="请填写会议主题">
								</div>
							</div>
						</li>
						<li class="mui-table-view-cell" style="padding: 11px 5px;">
							<div class="mui-col-xs-12">
								<div class="mui-input-row">
									<label>会议内容</label>
									<textarea id="textarea" v-model="meetingcontent" rows="5" placeholder="请填写会议内容"></textarea>
								</div>
							</div>
						</li>
						<li class="mui-table-view-cell" style="padding: 11px 5px;">
							<div class="mui-col-xs-12">
								<div class="mui-input-row">
									<label>会议地址</label>
									<input type="text" class="mui-input-clear mui-input" placeholder="请填写会议地址">
								</div>
							</div>
						</li>
						<li cl class="mui-table-view-cell" style="padding: 11px 5px;">
							<div class="mui-input-row" @click="selectMeetingMembers">
								<label>与会人员</label>
								<textarea id="members" v-model="memberscontent" readonly="" rows="2" placeholder="请选择与会人员"></textarea>
								<!--<input type="text" class="mui-input-clear mui-input" disabled="disabled" placeholder="请选择与会人员">-->
							</div>
						</li>
						<li class="mui-table-view-cell" style="padding: 11px 5px;">
							<div class="mui-input-row" @click="selectMeetingModerator">
								<label>会议主持</label>
								<textarea id="moderator" v-model="moderatorcontent" readonly="" rows="2" placeholder="请选择会议主持"></textarea>
								<!--<input type="text" class="mui-input-clear mui-input" disabled="disabled" placeholder="请选择会议主持">-->
							</div>
						</li>
						<li class="mui-table-view-cell" style="padding: 11px 5px;">
							<div class="mui-input-row" @click="selectMeetingAssistant">
								<label>会议助理</label>
								<textarea id="assistant" v-model="assistantcontent" readonly="" rows="2" placeholder="请选择会议助理"></textarea>
							</div>
						</li>
						<li class="mui-table-view-cell" style="padding: 11px 5px;">
							<div class="mui-col-xs-12">
								<div class="mui-input-row" @click="selectMeetingReview">
									<label>会议审核</label>
									<input id="review" v-model="reviewcontent" type="text" class="mui-input-clear mui-input" disabled="disabled" placeholder="请选择会议审核人员">
								</div>
							</div>
						</li>
						<li class="mui-table-view-cell" style="padding: 11px 5px;">
							<div class="mui-col-xs-12">
								<div class="mui-input-row">
									<label>会议文件</label>
									<input type="text" class="mui-input-clear mui-input" disabled="disabled" placeholder="请选择上传文件">
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</body>

</html>
<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="../js/mui.min.js"></script>
<script type="text/javascript" src="../js/mui.picker.min.js"></script>
<script type="text/javascript" src="../js/config.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../js/localStorage.js"></script>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript">
	var meetingbookvm;
	var rbeginTime = $("#beginTime")[0];
	var rendTime = $("#endTime")[0];
	var isOpen = document.getElementById("switchOpen");

	var _meetingMembersObj, _meetingModeratorObj, _meetingAssistantObj, _meetingReviewObj; // 与会人员、会议主持、会议助理、会议审核人员

	mui.init();
	mui('.mui-switch')['switch']();

	//屏幕可用工作区高度
	var contentHeight = window.screen.availHeight - 65;
	$(".mui-control-content").height(contentHeight);

	setTimeout(function() {
		mui(".mui-scroll-wrapper").scroll();
	}, 500);

	mui.plusReady(function() {
		initEvt();
		initDom();
	});

	//	初始化事件
	function initEvt() {
		//	会议管理
		mui('body').on('tap', '#btnSaveConference', function() {
			mui.toast('预约会议成功');
			/*mui.openWindow({
				url: '/html/my-conferencemanage.html',
				id: 'my-conferencemanage',
				createNew: false,
				extras: {
					'info': apploginuser,
				},
				show: {
					autoShow: true,
					aniShow: 'slide-in-right',
					duration: 300
				},
				waiting: {
					autoShow: false,
					title: '正在加载...'
				}
			})*/
		});

		//	是否公开选项
		mui('.mui-content .mui-switch').each(function() { //循环所有toggle
			//toggle.classList.contains('mui-active') 可识别该toggle的开关状态
			console.log(this.classList.contains('mui-active'));

		});

		//	开始时间选择
		mui('body').on('tap', '#beginTime', function() {
			var optionsJson = this.getAttribute('data-options') || '{}';
			var options = JSON.parse(optionsJson);
			var picker = new mui.DtPicker(options);
			picker.show(function(rs) {
				//mui("#beginTime")[0].value = rs.text;
				meetingbookvm.meetingbeginTime = rs.text;
				rbeginTime.value = rs.text;
				if(rendTime.value != '') {
					var start = new Date(rbeginTime.value.replace("-", "/").replace("-", "/"));
					var end = new Date(rendTime.value.replace("-", "/").replace("-", "/"));
					if(end < start) {
						mui.toast("时间开始日期大于结束日期,请选择会议结束时间");
						meetingbookvm.meetingendTime = '';
						rendTime.value = '';
						return;
					}
				}

				picker.dispose();
			});
		}, false);

		//	结束时间选择
		mui('body').on('tap', '#endTime', function() {
			if(rbeginTime.value == "") {
				mui.toast('请选择会议开始时间');
				return;
			}
			var optionsJson = this.getAttribute('data-options') || '{}';
			var options = JSON.parse(optionsJson);
			var picker = new mui.DtPicker(options);

			picker.show(function(rs) {
				rendTime.value = rs.text;
				var start = new Date(rbeginTime.value.replace("-", "/").replace("-", "/"));
				var end = new Date(rendTime.value.replace("-", "/").replace("-", "/"));
				if(end < start) {
					mui.toast("会议开始时间不能晚于结束时间");
					rendTime.value = '';
					mui("#endTime")[0].value = '';
					return;
				} else {
					//mui("#endTime")[0].value = rs.text;
					meetingbookvm.meetingendTime = rs.text;
					picker.dispose();
				}

			});
		}, false);
	}

	//	初始化DOM
	function initDom() {
		meetingbookvm = new Vue({
			el: "#mui-content",
			data: {
				meetingtype: '', //会议类型
				meetingform:'',//会议形式
				meetingbeginTime:'',//会议开始时间
				meetingendTime:'',//会议结束时间
				meetingtheme:'',//会议主题
				meetingcontent:'',//会议内容
				memberscontent: '', // 与会人员
				moderatorcontent: '', //	会议主持
				assistantcontent: '', // 会议助理
				reviewcontent: '' // 会议审核
			},
			methods: {

				//	选择会议类型
				selectMeetingType: function() {
					var meetingTypePicker = new mui.PopPicker();
					meetingTypePicker.setData([{
							"value": 0,
							"text": "三会一课"
						},
						{
							"value": 1,
							"text": "固定党日"
						},
						{
							"value": 2,
							"text": "学习教育"
						},
						{
							"value": 3,
							"text": "其他"
						}
					]);

					var meetingTypeResult = document.getElementById('selectMeetingType');
					meetingTypePicker.show(function(items) {
						//meetingTypeResult.value = items[0].text;
						meetingbookvm.meetingtype = items[0].text;
						//返回 false 可以阻止选择框的关闭
						//return false;
					});
				},

				//	选择会议形式
				selectMeetingForm: function() {
					var meetingFormPicker = new mui.PopPicker();
					meetingFormPicker.setData([{
							"value": 0,
							"text": "线上直播"
						},
						{
							"value": 1,
							"text": "线下会议"
						}
					]);

					var meetingFormResult = document.getElementById('selectMeetingForm');
					meetingFormPicker.show(function(items) {
						//meetingFormResult.value = items[0].text;
						meetingbookvm.meetingform = items[0].text;
						//返回 false 可以阻止选择框的关闭
						//return false;
					});
				},

				/*//	会议是否公开
				switchOpen: function() {
					mui(".mui-switch").switch().toggle();
				},*/

				// 选择与会人员
				selectMeetingMembers: function() {
					//console.log('与会人员');
					openSelector(1, '选择与会人员', _meetingMembersObj);
				},

				// 选择会议主持
				selectMeetingModerator: function() {
					//console.log('会议主持');
					//openSelector(2,_meetingModeratorObj);
					openSelector(2, '选择会议主持', _meetingModeratorObj);
				},

				// 选择会议助理
				selectMeetingAssistant: function() {
					//console.log('会议助理');
					openSelector(3, '选择会议助理', _meetingAssistantObj);
				},

				// 选择会议审核人员
				selectMeetingReview: function() {
					//console.log('会议审核人员');
					openSelector(4, '选择会议审核人员', _meetingReviewObj);
				},
			},
		})
	};

	//	打开新消息通知界面
	function openSelector(type, typename, values) {
		var sObjs = values || ''
		mui.openWindow({
			url: "/html/my-conference-people.html",
			id: "my-conference-people",
			extras: {
				"typemeeting": type, // 1、与会人员    2、会议主持    3、会议助理 4、会议审核人员
				"typename": typename,
				'selectors': sObjs
			},
			createNew: true, //是否重复创建同样id的webview，默认为false:不重复创建，直接显示
			show: {
				autoShow: true, //页面loaded事件发生后自动显示，默认为true
				aniShow: 'slide-in-right', //页面显示动画，默认为”slide-in-right“；
				duration: 600 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
			},
			waiting: {
				autoShow: false, //自动显示等待框，默认为true
				title: '正在加载...' //等待对话框上显示的提示内容
			}
		})
	};

	//	监听聊天消息时触发
	window.addEventListener('refreshMeetingBookData', function(e) {
		console.log(JSON.stringify(e.detail));
		var selectorarr = [];
		$.each(e.detail.items, function(index, item) {
			selectorarr.push(item.name);
		});
		switch(e.detail.type) {
			case 1:
				_meetingMembersObj = e.detail.items;
				meetingbookvm.memberscontent = selectorarr;
				//console.log('与会人员=' + JSON.stringify(_meetingMembersObj));
				break;
			case 2:
				_meetingModeratorObj = e.detail.items;
				meetingbookvm.moderatorcontent = selectorarr;
				//console.log('会议主持=' + JSON.stringify(_meetingModeratorObj));
				break;
			case 3:
				_meetingAssistantObj = e.detail.items;
				//console.log('会议助理=' + JSON.stringify(_meetingAssistantObj));
				meetingbookvm.assistantcontent = selectorarr;
				break;
			case 4:
				_meetingReviewObj = e.detail.items;
				meetingbookvm.reviewcontent = selectorarr;
				//console.log('会议审核人员=' + JSON.stringify(_meetingReviewObj));
				break;
			default:
				break;
		}

	});
</script>